<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理员界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            width: 90%;
            max-width: 800px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .content {
            padding: 20px;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }
        select {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
            appearance: none; /* 隐藏默认的下拉箭头 */
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        option {
            padding: 10px;
        }
        section {
            display: none;
            margin-top: 20px;
        }
        section.active {
            display: block;
        }
        h2 {
            font-size: 20px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 10px;
            color: #555;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        ul li {
            margin-bottom: 10px;
        }
        ul li a {
            color: #007bff;
            text-decoration: none;
        }
        ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="content">

        <h1>银行管理员界面</h1>

        <label for="function-select">选择功能：</label>
        <select id="function-select" onchange="showSection()">
            <option value="a">请选择功能</option>
            <option value="user-management">用户管理</option>
            <option value="account-management">贷款产品管理</option>
            <option value="transaction-history">交易记录</option>
            <option value="reports">公司管理</option>
            <option value="creditCard">银行卡管理</option>
            <option value="Finance">理财产品管理</option>
        </select>

        <!-- 用户管理 -->
        <section id="a" class="active">
            <h2></h2>
            <ul>
            </ul>
        </section>

        <section id="user-management" >
            <h2>用户管理</h2>
            <ul>
                <li><a href="/message">用户信息管理</a></li>
                <li><a href="/addUser">添加新用户</a></li>
            </ul>
        </section>

        <!-- 账户管理 -->
        <section id="account-management">
            <h2>贷款信息管理</h2>
            <ul>
                <li><a href="/loanproductmessage">贷款产品</a></li>
                <li><a href="/loanproductadd">增加贷款产品</a></li>
                <li><a href="/loanusermessage">用户所持有的贷款</a></li>
                <li><a href="/loanapply">用户贷款申请处理</a></li>
            </ul>
        </section>

        <!-- 交易记录 -->
        <section id="transaction-history">
            <h2>交易记录</h2>
            <ul>
                <li><a href="/pmessage">查看交易记录</a></li>

            </ul>
        </section>

        <section id="reports">
            <h2>公司管理</h2>
            <ul>
                <li><a href="/companymessage">公司信息</a></li>
                <li><a href="/companymessageadd">添加公司</a></li>
            </ul>
        </section>



        <!-- 报告生成 -->
        <section id="creditCard">
            <h2>银行卡管理</h2>
            <ul>
                <li><a href="/cmessage">银行卡信息</a></li>
                <li><a href="/crmessage">开户</a></li>

            </ul>
        </section>

        <section id="Finance">
            <h2></h2>
            <ul>
                <li><a href="/fmessage">金融产品信息</a></li>
                <li><a href="/fadd">添加金融产品</a></li>
                <li><a href="/fumessage">用户购买信息</a></li>
            </ul>
        </section>

    </div>

</div>

<script>
    function showSection() {
        var selectBox = document.getElementById("function-select");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;

        // Hide all sections
        var sections = document.querySelectorAll("section");
        sections.forEach(function(section) {
            section.classList.remove("active");
        });

        // Show the selected section
        if (selectedValue !== "") {
            var selectedSection = document.getElementById(selectedValue);
            selectedSection.classList.add("active");
        }
    }
</script>

</body>
</html>
